1. How quick can we be?
(data visualization techniques for engineers)

2. Who we are

3. Who we are
Alice Bonhomme-Biais

4. Who we are
Alice Bonhomme-Biais Avni Khatri

7. DATA

10. OUR PROCESS

11. Goals

12. Goals
1. Plot the number of people at each location

13. Goals
1. Plot the number of people at each location
2. Plot the percentage of women at each location

14. Goals
1. Plot the number of people at each location
2. Plot the percentage of women at each location
3. Plot two dimensions

15. Goals
1. Plot the number of people at each location
2. Plot the percentage of women at each location
3. Plot two dimensions
4. Clearly show the gender disparity

16. Goals
1. Plot the number of people at each location
2. Plot the percentage of women at each location
3. Plot two dimensions
4. Clearly show the gender disparity
5. Use the tool to visualize data for future RHoKs

17. OPENHEATMAP

18. OpenHeatMap Demo

20. TOOLS

21. Non-programmatic tools

22. Non-programmatic tools
• OpenHeatMap
• Google Fusion Tables
• Google Charts
• Socrata
• ChartsBin
• Factual

23. Non-programmatic tools
• OpenHeatMap
• Google Fusion Tables
• Google Charts
• Socrata
• ChartsBin
• Factual

24. Non-programmatic tools
• OpenHeatMap
• Google Fusion Tables
• Google Charts
• Socrata
• ChartsBin
• Factual

25. Programatic tools

26. Programatic tools
• Google Maps JS API
• Yahoo! Maps Web Services
• Bing Maps AJAX Control
• Google Charts Tools

27. GOOGLE FUSION TABLES

28. Fusion Tables Demo

31. SOCRATA

33. GOOGLE MAPS API

35. function initialize() {
var latlng = new google.maps.LatLng(41.850033, -87.6500523);
var myOptions = {
zoom: 3,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById("map_canvas"),
myOptions);
}

36. function initialize() {
var latlng = new google.maps.LatLng(41.850033, -87.6500523);
var myOptions = {
zoom: 3,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById("map_canvas"),
myOptions);
}

37. function initialize() {
var latlng = new google.maps.LatLng(41.850033, -87.6500523);
var myOptions = {
zoom: 3,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById("map_canvas"),
myOptions);
}

38. var locations = [
["Aarhus, Denmark",56.162939,10.203921,10,20],
["Bangalore, India",12.971599,77.594563,217,11.98],
["Chicago, Illinois",41.878114,-87.629798,107,31.78],
["Nairobi, Kenya",1.283333,36.816667,33,6.06].......];

39. var locations = [
["Aarhus, Denmark",56.162939,10.203921,10,20],
["Bangalore, India",12.971599,77.594563,217,11.98],
["Chicago, Illinois",41.878114,-87.629798,107,31.78],
["Nairobi, Kenya",1.283333,36.816667,33,6.06].......];

40. function setMarkers(map, markers) {
...
for (var i = 0; i < markers.length; i++) {
markerLatLng = new
google.maps.LatLng(markers[i][1],markers[i][2]);
marker = new google.maps.Marker({
position: markerLatLng,
map: map,
title: markers[i][0],
zIndex: 1
);
}
}
// add call to setMarkers in initialize
function initialize() {
...
setMarkers (map, locations);
}

41. function setMarkers(map, markers) {
...
for (var i = 0; i < markers.length; i++) {
markerLatLng = new
google.maps.LatLng(markers[i][1],markers[i][2]);
marker = new google.maps.Marker({
position: markerLatLng,
map: map,
title: markers[i][0],
zIndex: 1
);
}
}
// add call to setMarkers in initialize
function initialize() {
...
setMarkers (map, locations);
}

42. function setMarkers(map, markers) {
...
for (var i = 0; i < markers.length; i++) {
markerLatLng = new
google.maps.LatLng(markers[i][1],markers[i][2]);
marker = new google.maps.Marker({
position: markerLatLng,
map: map,
title: markers[i][0],
zIndex: 1
);
}
}
// add call to setMarkers in initialize
function initialize() {
...
setMarkers (map, locations);
}

43. function setMarkers(map, markers) {
for (var i = 0; i < markers.length; i++) {
...
iwContent = "<span class=”label”>" + markers[i][0] +
"</span><br/>" + "Number of People: " + markers[i][3] +
"<br/>" + "% of Women: " + markers[i][4];
marker = new google.maps.Marker({
...
html: iwContent
});
google.maps.event.addListener(marker, "click",
function() {
infowindow.setContent(this.html);
infowindow.open(map, this);
});
}
}
function initialize() {
...
infowindow = new google.maps.InfoWindow({
content: "loading..."
});
}

44. function setMarkers(map, markers) {
for (var i = 0; i < markers.length; i++) {
...
iwContent = "<span class=”label”>" + markers[i][0] +
"</span><br/>" + "Number of People: " + markers[i][3] +
"<br/>" + "% of Women: " + markers[i][4];
marker = new google.maps.Marker({
...
html: iwContent
});
google.maps.event.addListener(marker, "click",
function() {
infowindow.setContent(this.html);
infowindow.open(map, this);
});
}
}
function initialize() {
...
infowindow = new google.maps.InfoWindow({
content: "loading..."
});
}

45. function setMarkers(map, markers) {
for (var i = 0; i < markers.length; i++) {
...
iwContent = "<span class=”label”>" + markers[i][0] +
"</span><br/>" + "Number of People: " + markers[i][3] +
"<br/>" + "% of Women: " + markers[i][4];
marker = new google.maps.Marker({
...
html: iwContent
});
google.maps.event.addListener(marker, "click",
function() {
infowindow.setContent(this.html);
infowindow.open(map, this);
});
}
}
function initialize() {
...
infowindow = new google.maps.InfoWindow({
content: "loading..."
});
}

48. <script src="http://gmaps-utility-library.googlecode.com/svn/
trunk/markerclusterer/1.0/src/markerclusterer.js"></script>
var data = {"count": 232,
"participants": [
{
"location": "Aarhus, Denmark",
"gender": "Female",
"latitude": "56.162939",
"longitude": "10.203921"
},
{
"location": "Aarhus, Denmark",
"gender": "Female",
"latitude": "56.162939",
"longitude": "10.203921"
}
...
...
]};

49. <script src="http://gmaps-utility-library.googlecode.com/svn/
trunk/markerclusterer/1.0/src/markerclusterer.js"></script>
var data = {"count": 232,
"participants": [
{
"location": "Aarhus, Denmark",
"gender": "Female",
"latitude": "56.162939",
"longitude": "10.203921"
},
{
"location": "Aarhus, Denmark",
"gender": "Female",
"latitude": "56.162939",
"longitude": "10.203921"
}
...
...
]};

50. <script src="http://gmaps-utility-library.googlecode.com/svn/
trunk/markerclusterer/1.0/src/markerclusterer.js"></script>
var data = {"count": 232,
"participants": [
{
"location": "Aarhus, Denmark",
"gender": "Female",
"latitude": "56.162939",
"longitude": "10.203921"
},
{
"location": "Aarhus, Denmark",
"gender": "Female",
"latitude": "56.162939",
"longitude": "10.203921"
}
...
...
]};

51. var markers = [];
for (var i = 0; i < data.participants.length; ++i) {
var latlng = new GLatLng(data.participants[i].latitude,
data.participants[i].longitude);
var marker = new GMarker(latlng, {icon: icon});
markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers);

52. var markers = [];
for (var i = 0; i < data.participants.length; ++i) {
var latlng = new GLatLng(data.participants[i].latitude,
data.participants[i].longitude);
var marker = new GMarker(latlng, {icon: icon});
markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers);

56. var layer = new google.maps.FusionTablesLayer(747060, {
heatmap: true
});
layer.setMap(map);

57. var layer = new google.maps.FusionTablesLayer(747060, {
heatmap: true
});
layer.setMap(map);

59. function plotCircles(map, dataPoints) {
...
for (var i = 0; i < dataPoints.length; i++) {
pointLatLng = new
google.maps.LatLng(dataPoints[i][1],dataPoints[i][2]);
circleOptions = {
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: “#FF0000”,
fillOpacity: 0.40,
map: map,
center: pointLatLng,
radius: dataPoints[i][3]*3000
};
circle = new google.maps.Circle(circleOptions);
}

60. function plotCircles(map, dataPoints) {
...
for (var i = 0; i < dataPoints.length; i++) {
pointLatLng = new
google.maps.LatLng(dataPoints[i][1],dataPoints[i][2]);
circleOptions = {
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: “#FF0000”,
fillOpacity: 0.40,
map: map,
center: pointLatLng,
radius: dataPoints[i][3]*3000
};
circle = new google.maps.Circle(circleOptions);
}

61. ...
percentage = dataPoints[i][4];
if (percentage <= 10) {
color = "#FF0000";
} else if (percentage >=20) {
color = "#339900";
} else {
color = "#FFCC00";
}
circleOptions = {
strokeColor: color,
....

62. ...
percentage = dataPoints[i][4];
if (percentage <= 10) {
color = "#FF0000";
} else if (percentage >=20) {
color = "#339900";
} else {
color = "#FFCC00";
}
circleOptions = {
strokeColor: color,
....

64. ...
setMarkers (map, locations);
infowindow = new google.maps.InfoWindow({
content: "loading..."
});
....

65. ...
setMarkers (map, locations);
infowindow = new google.maps.InfoWindow({
content: "loading..."
});
....

67. YAHOO! MAPS WEB SERVICES

70. ....
icon = new YImage();
icon.src = "marker_34_red.png";
icon.size = new YSize(20,34);
icon.offsetSmartWindow = new YCoordPoint(9,0);
....
var marker = new YMarker(point, icon);
....

71. ....
icon = new YImage();
icon.src = "marker_34_red.png";
icon.size = new YSize(20,34);
icon.offsetSmartWindow = new YCoordPoint(9,0);
....
var marker = new YMarker(point, icon);
....

74. GOOGLE CHARTS TOOLS

76. Conclusions
Visualize 2
No Coding Legend First Map Full Control
sets of data
OpenHeatMap Easy
Google Fusion
Easy
Tables
Google Charts Moderate
Socrata Moderate
Google Maps API Moderate
Yahoo Maps
Moderate
Web Services
Google Charts
Moderate
Tools

77. Conclusions

78. Conclusions
• Very easy to plot flat numbers with most tools

79. Conclusions
• Very easy to plot flat numbers with most tools
• Plotting multiple sets of data without code is not trivial

80. Conclusions
• Very easy to plot flat numbers with most tools
• Plotting multiple sets of data without code is not trivial
• Flash graphics still ahead of JS graphics with respect to data visualization

81. Conclusions
• Very easy to plot flat numbers with most tools
• Plotting multiple sets of data without code is not trivial
• Flash graphics still ahead of JS graphics with respect to data visualization
• Most map and charting tools need better overall legend support

82. Conclusions
• Very easy to plot flat numbers with most tools
• Plotting multiple sets of data without code is not trivial
• Flash graphics still ahead of JS graphics with respect to data visualization
• Most map and charting tools need better overall legend support
• Maps API products very similar in structure

83. Conclusions
• Very easy to plot flat numbers with most tools
• Plotting multiple sets of data without code is not trivial
• Flash graphics still ahead of JS graphics with respect to data visualization
• Most map and charting tools need better overall legend support
• Maps API products very similar in structure
• We've uncovered just the tip of the iceberg in terms of data visualization

84. Conclusions
• Very easy to plot flat numbers with most tools
• Plotting multiple sets of data without code is not trivial
• Flash graphics still ahead of JS graphics with respect to data visualization
• Most map and charting tools need better overall legend support
• Maps API products very similar in structure
• We've uncovered just the tip of the iceberg in terms of data visualization
• Our visualized data showed us that the more the people that attended the
event, the more likely we were to meet the 20% challenge

85. Conclusions
• Very easy to plot flat numbers with most tools
• Plotting multiple sets of data without code is not trivial
• Flash graphics still ahead of JS graphics with respect to data visualization
• Most map and charting tools need better overall legend support
• Maps API products very similar in structure
• We've uncovered just the tip of the iceberg in terms of data visualization
• Our visualized data showed us that the more the people that attended the
event, the more likely we were to meet the 20% challenge
• We need to improve and automate our data collection process as much as
possible

86. Conclusions
• Very easy to plot flat numbers with most tools
• Plotting multiple sets of data without code is not trivial
• Flash graphics still ahead of JS graphics with respect to data visualization
• Most map and charting tools need better overall legend support
• Maps API products very similar in structure
• We've uncovered just the tip of the iceberg in terms of data visualization
• Our visualized data showed us that the more the people that attended the
event, the more likely we were to meet the 20% challenge
• We need to improve and automate our data collection process as much as
possible
• We need more women hackers

87. Conclusions
• Very easy to plot flat numbers with most tools
• Plotting multiple sets of data without code is not trivial
• Flash graphics still ahead of JS graphics with respect to data visualization
• Most map and charting tools need better overall legend support
• Maps API products very similar in structure
• We've uncovered just the tip of the iceberg in terms of data visualization
• Our visualized data showed us that the more the people that attended the
event, the more likely we were to meet the 20% challenge
• We need to improve and automate our data collection process as much as
possible
• We need more women hackers
• When women do participate, they win!

89. RHoK #3 on June 4th and 5th
SIGN UP NOW!

90. Contact us
aliceb@google.com avni@avni.net
@avni321

91. Resources and further
• http://msdn.microsoft.com/en-us/library/bb429619.aspx
• http://code.google.com/apis/chart/
• http://www.google.com/fusiontables/public/tour/index.html
• http://code.google.com/apis/maps/documentation/javascript/
• http://developer.yahoo.com/maps/
• http://www.openheatmap.com/
• http://googlegeodevelopers.blogspot.com/2009/04/markerclusterer-solution-to-too-
many.html
• http://opendata.socrata.com/

92. Photo Credits
• http://www.flickr.com/photos/compassalba/5361528668/sizes/o/in/photostream/
• http://www.flickr.com/photos/rhok_chicago/5244434726/in/
set-72157625557470340
• http://www.flickr.com/photos/rhok_chicago/5233673064/in/
set-72157625529538216
• http://www.flickr.com/photos/10785432@N03/4123252604/
• http://www.flickr.com/photos/thehbunny/5055948378/
• http://www.flickr.com/photos/53941041@N00/4977883190/
• http://www.flickr.com/photos/rhok_chicago/5243866521/
• http://www.flickr.com/photos/rhok_chicago/5244461658/in/
set-72157625557470340
• http://www.flickr.com/photos/rhok_chicago/5233687260/in/
set-72157625529538216
• http://www.flickr.com/photos/ladypain/1950149100/in/photostream/
• http://www.flickr.com/photos/10687935@N04/3055314845/
• http://www.flickr.com/photos/42788859@N00/318947873/